این شماره به المان Division خواهیم پرداخت. Divisionها یا به صورت اختصاری Divها را میتوان یکی از مهمترین المانهای اچتیامال دانست که در طراحی و ساخت چینش صفحه نقش بسیار مهمی ایفا میکنند. با ما برای آشنایی با این المانها همراه شوید.
المانهای div مخفف کلمه divison هستند. divison به معنای تقسیم کردن است و در واقع المانهای div نیز وظیفه تقسیم بندی صفحات به بخشهای مختلف را دارند. در واقع به کمک المان Div شما میتوانید صفحاتتان را به بخشهای مختلف ( از این به بعد بهتر است بدانید به divهای مختلف) تقسیم بندی میکنید.
برای درک بهتر مثالی میزنیم. فرض کنید صفحه اچتیامال شما همانند یک انباری است و المانهای اچتیامال (همچون متنها یا هدرها یا هر چیز دیگر) وسایل این انباری هستند. اگر بخواهید هر المان را به صورت مرتب در جای خود قرار دهید ناچارید تا آنها را دسته بندی کنید وگرنه همه آنها روی هم تلانبار میشوند. به همین خاطر هم المان div این وظیفه را بر عهده میگیرد. در واقع این المان همانند جعبههای تو خالی است که در کنار هم قرار میگیرند. این جعبههای تو خالی میتوانند ظاهر سایت شما را مرتب نگاه دارند. این جعبههای تو خالی در درون خود المانهای اچتیامال را جای میدهند.
حالا که با مفهوم کلی این المان و کاربرد آن بیشتر آشنا شدید, سراغ نحوه استفاده از المان div در اچتیامال خواهیم رفت. منتها قبل از آن, بد نیست اگر با مفهومی مهم به نام بلاک المان و اینلاین المان آشنا شوید.
المانهای بلاک و المانهای اینلاین (درون خطی)
یکی از بخشهای مهم در اچتیامال دانستن مفهوم بسیار ساده ولی پراهمیت بلاک و اینلاین است. المانهای اچتیامال به دو نوع تقسیم میشوند. المانهای بلاک (block eleman) و المانهای یک خطی (inline).
در المانهای بلاک (block eleman), المان مورد نظر کل فضایی که در اختیار دارد را اشغال میکند و اجازه نمیدهد که المان دیگری در کنار آن قرار بگیرد. در واقع این المانها چندان اجتماعی نیستند و طاقت تحمل یک همسایه را هم در کنار خود ندارند.
مثلا المان پاراگراف را یکبار امتحان کنید. شما به صورت همزمان نمیتوانید دو المان پاراگراف را در یک خط در کنار هم جای دهید. در واقع المانهایی که بعد از این المانها نوشته میشود بدون تردید از سطر بعدی شروع خواهد شد.
به مثال زیر دقت کنید:
نمونه
<p>خط اول </p> <p>خط دوم</p><p>خط سوم</p>
نتیجهای که مرورگر نمایش خواهد داد
خط اول
خط دوم
خط سوم
همانطور که دیدید، بعد از بستن المان پاراگراف اول، پاراگراف دوم از خط بعدی شروع شد. با وجود آنکه ما هر سه تگ پاراگراف را در هنگام نوشتن کد در یک خط نوشتیم، ولی در نتیجه نهایی هر کدام از آنها یک سطر را اشغال میکند و سطر دوم و سوم را نیز پر میکنند. به همین خاطر به چنین المانهایی بلاک المان میگویند چون اجازه قرار گرفتن المان دیگری را در کنار خود نمیدهند و به طور کامل فضای اطراف خود را پر میکنند.
این موضوع در المانهای دیگری همچون هدینگها یا لیستها (<h1>, <p>, <ul>) نیز صادق است.
در طرف مقابل، المانهای اینلاین المانهای سازگارپذیر تر و خوش برخوردتری هستند. این المانها مهمان نوازند و هیچگاه یک خط کامل را برای خودشان اشغال نمیکنند. آنها در کنار المانهای اینلاین دیگر بی سر و صدا قرار میگیرند. از جمله این المانها میتوان <link , <b>, <td>, <a>, <img اشاره نمود. شما میتوانید این المانها را در هر جایی از صفحه قرار دهید بدون آنکه باعث مزاحمتی برای المانهای کنار دستیشان شوید.
اما این مقدمهها را برای این گفتیم تا به المان div برسیم. با این تفاسیر اکنون شما فکر میکنید المان Div جزو کدام دسته از المانها محسوب میشود؟
المان Div از نوع المانهای بلاک است و زمانی که مورد استفاده قرار بگیرد نمیگذارد المان دیگری جای آن را بگیرد. این المان در واقع برای بخش بندی صفحات اچتیامال مورد استفاده قرار میگیرد. در واقع برای درک بهتر همان مثال جعبه را فرض کنید. المانهای div همانند جعبههای یک انباری که هر وسیلهای را در درون خود جای میدهد و بدین ترتیب نظم و فضای قابل تقسیمی را به شما ارائه میدهند و کمک میکنند وسایل و جعبهها را هر طور که دوست دارید در جای دلخواه خود قرار دهید. بدون آنکه جعبهای مزاحم جعبه دیگر باشد. با این المان و کاربرد آن در صفحه بندی و لایوت صفحه به مرور و خصوصا در جلسات مربوط به CSS بیشتر آشنا خواهیم شد. در حال حاضر اشاره مختصری به کاربرد این المان در اچتیامال میپردازیم.
المان Div
منو
منو
المان Div
همانطور که مشاهده میکنید شما با باز کردن یک المان Div و قرار دادن استایلها و طول و عرض دلخواه به آن میتوانید به راحتی صفحه خود را به بخشها و ظرفهای مختلف تقسیم بندی کرده و در درون هر یک از آنها محتویات دلخواه خود را قرار دهید. مثلا ما در داخل این Div خالی، از تگ P برای نوشتن متن استفاده کردهایم.برای ایجاد یک المان Div تنها کافی است تا تگ <div> </div> استفاده کنید. اما المانهای Div به خودی خود ظاهری ندارند و این استایل یا المان درون آنهاست که بدانها شکل ظاهری میبخشد.
برای درک بهتر به مثال بالا توجه کنید. در این مثال از سه المان Div استفاده شده است. المان Division هدر با رنگ پس زمینه مشکی به عنوان اولین div نوشته شده است. پس المان هدر در قالب بالا بدین صورت نوشته میشود:
<divstyle="background-color:black; ">
<h1style=" text-align:center">City Gallery</h1>
</div>
المان بعدی منوی کنار صفحه است که به همین ترتیب با قرار دادن یک المان Div با طول و عرض مشخص به عنوان ظرف در برگیرنده این المان، در خود متنهای نوشته شده را در برگرفته است.
پس با توجه به مثال متوجه شدیم که برای آنکه المان div
خود را بتوانید ببنیید باید حتما از اتریبیوت استایل استفاده کنید و بدان رنگ و ابعاد بدهید یا حداقل یک المان دیگر در آن قرار دهید. به مثالهای زیر توجه کنید:
نمونه کد
<divstyle="width:50px; height:50px; background-color:red"></div>
<divstyle="width:50px; height:50px; background-color:blue"></div>
<divstyle="width:50px; height:50px; background-color:green"></div>
<div style="width:50px; height:50px; background-color:yellow"></div>
نتیجه ای که در مرورگر خواهید دید
نتیجه این کد در صفحه اشکال رنگی میشود. این اشکال رنگی همان divهای صفحه است که میتوانند لایه بندی صفحه مورد استفاده قرار گیرند.
حالا در این مرحله قصد داریم تا یکی از این المانهای div
را به سایت دلخواه لینک کنیم. مثلا المان سبز رنگ را به سایت زومیت لینک میکنیم:
برای این کار همانند قبل، المان div که قرار است لینک شود را بین دو تگ <a href="/"></a>
قرار میدهیم.
<a href="/zoomit.ir"><div style="width:50px; height:50px; background-color:green"></div></a>
<a href="/zoomg.ir"><div style="width:50px; height:50px; background-color:green"></div></a>
تا به اینجای کار مفاهیم اولیه استفاده از المان div را آموختهایم. این المان در ایجاد صفحات HTML نقش بسیاری دارد ولی برای استفاده بهتر از آن باید با CSS آشنا باشید. به همین خاطر نحوه استفاده از این المان را در شروع آموزش CSS بازگو خواهیم کرد.
امیدواریم که این بار هم این آموزش، موفق به جلب رضایتتان شده باشد. تجربیات، پیشنهادات و نظرات شما بدون شک در ادامهی این مقالات آموزشی تاثیر بسزایی خواهد داشت. پس لطفا با ما در ارتباط باشید.
قسمت بعدی پنج شنبه اضافه می شود.
از لینک آماده شده ی زیر ی توانید به قسمت های قبلی دسترسی داشته باشید.
شارژ کردن گوشی با شارژر های مختلف
آپدیت جدید تلگرام: بخش استیکرهای محبوب، فضای شخصی نامحدود و موار
گلکسی نوت 7 به طور رسمی معرفی شداسکنر عنبیه چشم و 4 گیگابایت حاف
جوانسازی پوست فقط در 28 روز !؟
سارقان مسلح از بازی Pokemon Go برای به دام انداختن قربانیان استف
عملکرد سنسور عنبیه گلکسی نوت 7 فاش شد
این تکنیک آرایشی به سرعت جوش های صورت تان را می پوشاند!!!
جرم گرفتن دندان به دلیل 7 خطا